body {
    /*取消浏览器内间距  外间距*/
    margin: 0;
    padding: 0;
}

.a1 {
    display: inline-block; /*行内元素  转换成  块级元素*/
    width: 300px;
    height: 60px;
    background-color: sandybrown;
}

/*
    块级元素 display:block ： 占据一整行 ,换行 ,可以设置宽度高度          p，h1-h6,div,ul,li
    行内元素 display: inline： 不占据一整行，不换行  ,不可以设置 宽度高度   a,span,img,b,i,
    行内块级元素：  display:inline-block; 不占据一整行，可以设置宽度高度



*/
.nav-left {
    width: 30%; /*相对于父容器*/
    height: 500px;
    background-color: darkred;
    position: fixed; /*  固定定位： 元素脱离文档流*/
    left: 0;
    top: 0
}

.pro-right {

    width: 70%; /*相对于父容器*/
    height: 1500px;
    background-color: chartreuse;
    margin-left: 30%; /*跟左边的元素（父元素 浏览器）  保持 30%的间距*/
}